.markdown {
  font-size: inherit;
  color: $fontColor;
  -webkit-font-smoothing: auto;
  line-height: 1.6rem;
  letter-spacing: 0;
  margin: 0;
  overflow-x: hidden;
  :root {
    --side-bar-bg-color: #fff;
    --control-text-color: #777;
    --active-file-border-color: var(--drake-accent);
    --drake-accent: #e95f59;
    --drake-highlight: #d63200;
  }
  & a {
    text-decoration: none!important;
    color: inherit;
    padding: 0 4px;
    &:hover {
      color: $primary;
    }
  }
  & img {
    display: block;
    border-radius: 2px;
    max-width: 100%;
    margin-top: $padding;
    margin-bottom: $padding;
}
  & p {
    line-height: 1.6rem;
    word-spacing: .05rem;
  }
  & > ul:first-child,
  & > ol:first-child {
    margin-top: 30px;
  }
  & > *:first-child {
    margin-top: 0 !important;
  }
  & > *:last-child {
    margin-bottom: 0 !important;
  }
  & h1,& h2,& h3,& h4,& h5,& h6 {
    position: relative;
    margin-bottom: .6em;
    margin-top: .6em;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
    color: $fontColor;
  }
  & h1 tt, & h1 code, & h2 tt, & h2 code, & h3 tt, & h3 code, & h4 tt, & h4 code, & h5 tt, & h5 code, & h6 tt, & h6 code {
    font-size: inherit !important;
  }
  & h1 {
    padding-bottom: .4em;
    font-size: 1.8em;
    text-align: center;
    margin-top: 0;
    line-height: 1.3;
  }  
  & h2 {
    font-size: 1.6em;
    line-height: 1.225;
    padding-bottom: .3em;
    // border-bottom: 1px solid $borderColor;
  }  
  & h3 {
    font-size: 1.4em;
    line-height: 1.43;
  }  
  & h4 {
    font-size: 1.2em;
  }  
  & h5 {
    font-size: 1em;
  }  
  & h6 {
    font-size: 1em;
  }
  & p, & blockquote, & ul, & ol, & dl, & table {
    margin: 0.8em 0;
  }
  & li > ol, & li > ul {
    margin: 0 0;
  }
  & hr {
    height: 2px;
    padding: 0;
    margin: $padding 0;
    background-color: $borderColor;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
  }
  & > h2:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  
  & > h1:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  
  & > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
  }
  
  & > h3:first-child,
  & > h4:first-child,
  & > h5:first-child,
  & > h6:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  & a:first-child h1,
  & a:first-child h2,
  & a:first-child h3,
  & a:first-child h4,
  & a:first-child h5,
  & a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
  }
  & h1 p,
  & h2 p,
  & h3 p,
  & h4 p,
  & h5 p,
  & h6 p {
    margin-top: 0;
  }
  & ul, & ol {
    padding-left: 0;
  }
  & ul li {
    list-style-type: disc;
    list-style-position: inside;
  }
  & ol li {
    list-style-type: decimal;
    list-style-position: inside;
  }
  
  & ul:first-child,
  & ol:first-child {
    margin-top: 0;
  }
  
  & ul:last-child,
  & ol:last-child {
    margin-bottom: 0;
  }
  & blockquote {
    color: #304455;
    border-radius: 2px;
    padding: 10px 16px;
    background-color: #fdefee;
    position: relative;
    border-left: none;
  }
  & blockquote:before {
    display: block;
    position: absolute;
    content: '';
    width: 4px;
    left: 0;
    top: 0;
    height: 100%;
    background-color:var(--drake-accent);
    border-radius: 2px;
  }
  & strong {
    font-weight: 700px;
  }
  & table {
    padding: 0;
    word-break: initial;
    border-collapse: collapse;
    width: 100%;
  }
  
  & table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
  }
  
  & table tr:nth-child(2n),
  thead {
    background-color: #fafafa;
  }
  
  & table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
  }
  
  & table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
  }
  
  & table tr th:first-child,
  & table tr td:first-child {
    margin-top: 0;
  }
  
  & table tr th:last-child,
  & table tr td:last-child {
    margin-bottom: 0;
  }
  & em {
    padding: 0 5px 0 2px;
  }
  & table thead th {
    background-color: #f2f2f2;
  }
  
  & .CodeMirror-gutters {
    border-right: none;
  }
  
  /*code block*/
  & .md-fences {
    font-size: 1rem;
    padding: 0.5rem !important;
    border-radius: 2px;
    font-family: inherit !important;
    word-wrap: normal;
    background-color: #2b2b2b;
    color: #A9B7C6;
    border: none;
    margin-left: 2px;
    margin-right: 2px;
  }
  
  /*code snippet*/
  & code, tt {
    margin: 0 2px;
    border-radius: 2px;
    color: #858080;
    // font-family: sans-serif;
    font-family: consolas;
    letter-spacing: .05em;
    font-weight: normal;
  }
  
  /* heighlight. */
  & mark {
    background-color: #e7ecf3;
    color: inherit;
    border-radius: 2px;
    padding: 2px 2px;
    margin: 0 2px;
  }
  
  & del {
    padding: 1px 2px;
  }
  & code {
    border: 1px solid $borderColor;
    background-color: inherit;
    padding: 1px 4px;
    margin: 0 4px;
    font-size: 1em;
    font-weight: normal;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
  & pre {
    overflow: auto;
    background: $codeBackground;
    padding: 12px;
    color: #fff;
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    & code {
      color: #fff;
      background: $codeBackground;
    }
  }
}

// 代码高亮
.hljs-meta,
.hljs-title,
.hljs-string,
.hljs-keyword,
.hljs-variable,
.hljs-number,
.hljs-name,
.hljs-literal,
.hljs-doctag {
  font-weight: normal;
  color: #fff;
}
// bash
.language-bash {
  & .hljs-string, .hljs-built_in {
    color: #fff;
  }
}
// json
.language-json {
  & .hljs-attr {
    color: $jsKeywordColor;
  }
  & .hljs-string {
    color: $keywordColor;
  }
  & .hljs-literal {
    color: gold;
  }
}
// html
.language-html {
  & .hljs-meta {
    &-keyword {
      color: $xmlAttrColor;
    }
  }
  & .hljs-tag {
    & .hljs-name {
      color: $xmlNameColor;
    }
    & .hljs-attr {
      color: $xmlAttrColor;
    }
    & .hljs-string {
      color: $xmlAttrValueColor;
    }
  }
}
// php
.language-php {
  & .hljs-meta {
    color: gold;
  }
  & .hljs-title {
    color: inherit;
  }
  & .hljs-string {
    color: $stringColor;
  }
  & .hljs-keyword {
    color: $keywordColor;
  }
  & .hljs-variable, & .hljs-number, & .hljs-doctag {
    color: $variableColor;
  }
}
// xml
.language-xml {
  & .hljs-name {
    color: $xmlNameColor;
  }
  & .hljs-attr {
    color: $xmlAttrColor;
  }
  & .hljs-string {
    color: $xmlAttrValueColor;
  }
}
.language-javascript {
  & .hljs-keyword {
    color: $jsKeywordColor;
  }
  & .hljs-built_in {
    color: $stringColor;
  }
  & .hljs-function {
    color: gold;
  }
  & .hljs-number {
    color: $jsNumberColor;
  }
  & .hljs-string {
    color: $xmlNameColor;
  }
  & .hljs-literal {
    color: $xmlNameColor;
  }
  & .hljs-class {
    & .hljs-keyword {
      color: $xmlNameColor;
    }
    & .hljs-title {
      color: $stringColor;
    }
  }
}
.language-python {
  & .hljs-keyword {
    color: $pythonKeywork;
  }
  & .hljs-number {
    color: $variableColor;
  }
  & .hljs-function {
    & .hljs-keyword {
      color: $pythonKeywork;
    }
    & .hljs-title {
      color: gold;
    }
    & .hljs-number {
      color: $variableColor;
    }
  }
  & .hljs-string {
    color: $stringColor;
  }
}
